<template>
  <div>
    <!-- <searchHeader/> -->
    <main class="recomContentt" >
      <div class="topicAndcomment" v-for="(recom,a) in recommendList" :key="a" @click="tabXiao">
        <img :src="recom.cover" alt="">
        <p v-text="recom.title"></p>
        <p v-text="recom.summary"></p>
        <p>
          <span>参与</span>
          <span v-text="recom.comments_count"></span>
        </p>
      </div>
    </main>
  </div>
</template>
<script>
import { Popup } from "vux";
export default {
  data() {
    return {
      recommendList: [],
      isShow: false,
      status: "loading",
      loadingMore: false
    };
  },
  components: {
    Popup
  },
  mounted() {
    this.getRecommendInfo();
  },
  methods: {
    getRecommendInfo: function() {
      var _this = this;
      this.$http
        .get(
          "/judou/api/v6/op/channels/15?page=1&per_page=20&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545183344&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=32c80404d3d4c20e99ca01b12cab1518"
        )
        .then(function(value) {
          _this.recommendList = value.body.data;
          console.log(_this.recommendList);
        });
    },
    copyClick: function() {
      console.log(123123);
      this.isShow = !this.isShow;
    },
    cancel: function() {
      this.isShow = false;
    },
    copyText: function() {
      this.isShow = false;
      alert("复制成功");
    },
    tabXiao:function(){
      $('.weui-tabbar').hide()
    }
  }
};
</script>

<style scoped>
a:-webkit-any-link{
  text-decoration: none;
  color: black;
}
.recomContentt {
  height: 1000vw;
  position: relative;
  overflow-y: auto;
}
.topicAndcomment {
  width: 96vw;
  /* height: 60vw; */
  border-top: 2vw solid rgb(248, 247, 247);
  padding: 5vw 2vw;
  line-height: 6vw;
  position: relative;
  
}
.topicAndcomment img{
  width: 90vw;
  height: 35vw;
  margin:3% 0 0 3%;
  border-radius: 2vw;

}
.topicAndcomment p:nth-child(2){
  margin-left: 3vw;
  font-size: 4vw;
  
}
.topicAndcomment p:nth-child(3){
  font-size: 3vw;
  margin-left: 3vw;
  color: rgb(187, 181, 181);
}
.topicAndcomment p:nth-child(4){
  width: 12vw;
  height: 12vw;
  background-color: goldenrod;
  color: #fafafa;
  font-size: 2vw;
  border-radius: 50%;
  margin: 3vw;
  position: absolute;
  right: 5vw;
  top: 4vw;
  text-align: center;
}
.topicAndcomment p:nth-child(4)>span:nth-child(1){
  display: block;
  margin-top: 2vw;
}
.topicAndcomment p:nth-child(4)>span:nth-child(2){
  display: block;
  margin-top: -2vw;
}
</style>
